<template>
    <h2>App</h2>
    <p>m1: {{m1}}</p>
    <p>m2: {{m2}}</p>
    <p>m3: {{m3}}</p>
    <button @click="update">更新</button>
  </template>

<script lang="ts">
    import {
        reactive,
        ref
    } from 'vue'

    export default {

        setup() {
            const m1 = ref('abc')
            const m2 = reactive({
                    x: 1,
                    y: {
                        z: 'abc'
                    }
                })
                //             是Vue3的 composition API中2个最重要的响应式API
                // ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
                // 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
                // ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
                // reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
                // ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
                // 使用ref处理对象  ==> 对象会被自动reactive为proxy对象
            const m3 = ref({
                a1: 2,
                a2: {
                    a3: 'abc'
                }
            })
            console.log(m1, m2, m3)
            console.log(m3.value.a2) // 也是一个proxy对象

            function update() {
                m1.value += '--'
                m2.x += 1
                m2.y.z += '++'

                m3.value = {
                    a1: 3,
                    a2: {
                        a3: 'abc---'
                    }
                }
                m3.value.a2.a3 += '==' // reactive对对象进行了深度数据劫持
                console.log(m3.value.a2)
            }

            return {
                m1,
                m2,
                m3,
                update
            }
        }
    }
</script>